69k+ stars！三十秒零编码搞定 Mock 数据，堪称神器！

每天给大家带来网站工具、开源社区项目、开源软件、安卓&IOS软件等黑科技！

如果你们有什么好的建议，也可以在后台留言。

创作不易，希望大家给一点鼓励，把公众号设置为"星标"，给文章点下"赞"和"在看"，谢谢大家！每日持续更新，望宝子们多多支持~

Json-server 是一个零代码快速搭建本地 RESTful API 的工具。它使用 JSON 文件作为数据源，并提供了一组简单的路由和端点，可以模拟后端服务器的API。在实际的项目开发中，在后端还没有给我们接口的时候，可使用 Json-server 模拟真实数据，非常方便。

Json-server 在 GitHub 上已经获得了 69.3k+ stars，设计初衷的是为了帮助开发人员更快地创建请求，直接把一个json文件托管成一个具备全 Restful 风格的API，支持跨域、jsonp、路由定制、数据快照保存等等。

🎨️ 安装

安装 node 14+或更高版本

小编这里建议使用全局安装，后续使用起来就很方便。

npm 安装命令如下：

npm i -g json-server

验证安装是否成功(控制台输出版本号表示安装成功)：

json-server -v

🌟 使用体验

1、在任意位置创建 data 目录

mkdir data
cd data

2、在 data 目录创建 json文件：db.json

内容填写模拟的 json 数据

{
  "posts": [
    { "id": 1, "title": "json-server", "author": "typicode" }
  ],
  "comments": [
    { "id": 1, "body": "some comment", "postId": 1 }
  ],
  "profile": { "name": "typicode" }
}

3、启动 json-server

json-server --watch db.json --port 3000

--watch 指定json文件

--port 指定端口号，默认3000

其他可选指令：

参数	简写	说明	默认值
config	-c	指定配置文件路径	json-server.json
host	-H	指定主机名	默认 localhost
watch	-w	监控文件变化
routes	-r	指定路由文件路径
middlewares	-m	指定中间件文件路径
static	-s	指定静态文件文件夹路径
read-only	–ro	指定只允许get请求
no-cors	–nc	禁止跨域共享
no-gzip	–ng	禁止gzip压缩
snapshots	-S	指定快照目录	.
delay	-d	指定延迟返回时长(ms)
id	-i	指定数据库的ID属性	id
foreignKeySuffix	–fks	指定外键前缀	Id
quiet	-q	抑制来自输出的日志消息
help	-h	显示帮助
version	-v	显示版本号

4、浏览器访问

地址：https://localhost:3000

页面展示如下，可以分别点击/posts /comment /profile 链接，能看到各自的json数据。http://localhost:3000/db 链接能访问到完整的数据。

5、设置配置文件

• 命令行容易敲错

• 把所有的配置放到一个配置文件中，方便统一管理

在data目录新建配置文件名为：json_sever_config.json

内容如下，可参考 步骤3 中的可选指令：

{
    "port": 3000,
    "watch": true,
    "read-only": false,
    "no-cors": false,
    "no-gzip": false
}

6、通过 -c 指定 配置文件启动

json-server -c json_sever_config.json db.json

启动效果 同5

7、作为静态服务器访问图片

创建文件夹 static，随意放置一张图片 a.jpg

json-server -s ./static db.json

在浏览器访问：

http://localhost:3000/a.jpg

基本的核心使用方法就介绍到这里，json-server 服务完全符合 Restful 标准，非常适合模拟数据使用，提高开发效率。

开源代码地址：

https://github.com/typicode/json-server

点关注不迷路

本文发表于公众号【爱编程爱技术】

关注我们，阅读更多精彩内容

点击上方关注我们，谢谢支持！

往期推荐：